<template>
  <!-- :class="{ animate }" -->
  <div class="xtx-skeleton" :style="{ width, height, ...$attrs }" :class="{ animate }">
    <div class="block" :style="{ backgroundColor: bgColor }"></div>
  </div>
</template>

<script setup lang="ts">
import { withDefaults } from 'vue'
defineOptions({
  name: 'Skeleton'
})

interface Props {
  /** 宽 */
  width?: string
  /** 高 */
  height?: string
  /** 背景色 */
  bgColor?: string
  /** 是否开启动画 */
  animate?: boolean
}
/** props默认值 */
withDefaults(defineProps<Props>(), {
  width: '100px',
  height: '100px',
  bgColor: '#efefef',
  animate: false
})
</script>

<style lang="scss" scoped>
.xtx-skeleton {
  position: relative;
  display: inline-block;
  overflow: hidden;
  vertical-align: middle;

  .block {
    width: 100%;
    height: 100%;
    border-radius: 2px;
  }

  &.animate {
    &::after {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 50%;
      height: 100%;
      background: linear-gradient(
        to left,
        rgba(255, 255, 255, 0) 0,
        rgba(255, 255, 255, 0.3) 50%,
        rgba(255, 255, 255, 0) 100%
      );
      transform: skewX(-45deg);
      animation: shan 1.5s ease infinite;
    }
  }

  @keyframes shan {
    0% {
      left: -100%;
    }

    100% {
      left: 120%;
    }
  }
}
</style>
